<template>
    <view class="view-module-goods" v-if="info.ids">
        <view class="view-goods">
            <view class="goods-item" v-for="(item, index) in goods_list" :key="index" @click.stop="$go(`/pages/goods/index?id=${item.id}`)">
                <view class="gmimg-box">
                    <image class="gmimg" :src="$imgUrl + item.thumb" alt="" />
                </view>
                <view class="gmname-box">
                    <view class="gmname">{{ item.name }}</view>
                </view>
                <view class="price-box">
                    <view class="price-content">
                        <img class="pbg"
                            :src="info.bg_img ? ($imgUrl + info.bg_img) : 'https://img.hltmsp.com/bd/09/29/bd092996d26955bfb75c3a1d562ceb95.png'"
                            alt="">
                        <view class="pmain">
                            <view class="pml">
                                <view class="pmi" v-if="item.act_tag && item.act_tag.length > 0"
                                    :style="{ color: info.txt_color }">{{ item.act_tag[0] }}</view>
                            </view>
                            <view class="pmr" :style="{ color: info.price_color }">
                                {{ item.activity_price }}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
const { proxy } = getCurrentInstance()
const props = defineProps({
    info: {
        type: Object,
        default: {}
    }
})

onMounted(() => {
    getData()
});

const goods_list = ref([])
async function getData() {
    let res = await proxy.$api('PageGoods', {
        ids: props.info.ids
    }, false, false)
    if (res.code == 0) {
        goods_list.value = res.data || []
    }

}

</script>

<style lang="scss" scoped>
.view-module-goods {
    padding: 0 20rpx;

    .view-goods {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20rpx;

        .goods-item {
            height: 370rpx;
            border-radius: 8rpx;
            background-color: #fff;
            position: relative;
            margin-bottom: 20rpx;
            .gmimg-box {
                width: 100%;
                padding-top: 100%;
                position: relative;
            }

            .gmimg {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
            }

            .gmname-box {
                padding: 10rpx;
                min-height: 76rpx;
                box-sizing: border-box;
            }

            .gmname {
                width: 100%;
                font-size: 24rpx;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                /* 限制显示的行数为3行 */
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                text-align: center;
            }

            .price-box {
                width: 100%;
                height: 68rpx;
                position: absolute;
                left: 0;
                bottom: 0;
                z-index: 1;
                background-color: #fff;

                .price-content {
                    width: 100%;
                    height: 100%;
                    position: relative;

                    .pbg,
                    .pmain {
                        width: 100%;
                        height: 100%;
                        position: absolute;
                    }

                    .pmain {
                        z-index: 2;
                        display: flex;
                        align-items: center;

                        .pml {
                            flex: 1;

                            text-align: center;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;

                            .pmi {
                                color: #fff;
                                position: relative;
                                left: -6rpx;
                                top: 6rpx;
                                font-size: 22rpx;
                            }
                        }

                        .pmr {
                            flex: 1;
                            font-size: 28rpx;
                            text-align: center;
                            font-weight: bold;
                            color: #f00;
                            position: relative;
                            top: 2rpx;
                        }
                    }
                }

            }
        }
    }
}
</style>